@charset 'utf-8';

@mixin reuse-flex($flex-direction: row, $flex-wrap: nowrap) {
    display: flex;
    flex-wrap: $flex-wrap;
    flex-direction: $flex-direction;
}

@font-face {
    /* 引入字体 */
    font-family: myFont;
    src: url('../fonts/PingFang-SC.ttf');
}

html,
body {
    font-family: myFont;
    background: #E9ECF0;
}


.nav_tit {
    width: 100vw;
    background: #fff;
    height: 13.6vw;
    color: #555555;
    font-size: 4.2667vw;
    font-weight: 500;
    font-family: myFont;
    justify-content: center;
    border-bottom: .2667vw solid #f3f5f7;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    @include reuse-flex;
    align-items: center;
    z-index: 999;
}

// 主体内容
.main {
    padding: 13.33333vw 0;
    box-sizing: border-box;
    background: #E9ECF0;
}

// 底部选项卡
.tab {
    background: #E9ECF0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;

    ul {
        @include reuse-flex;
        justify-content: center;
        height: 13.6vw;
        box-sizing: border-box;
        align-items: flex-end;
        padding-bottom: 1.3333vw;

        li {
            flex: 1;
            font-size: 3.2vw;
            text-align: center;
            @include reuse-flex(column);

            a {
                width: 100%;
                @include reuse-flex(column);
                align-items: center;
                color: #333333;

                img {
                    width: 8.5333vw;
                    height: 8.5333vw;
                }

                &.active {
                    color: red;
                }
            }

        }
    }
}